<!--
 * @Author: licongwei
 * @Date: 2022-03-15 14:21:05
 * @Description: 数据报送情况
-->
<template>
  <com-box :title="title">
    <ul class="list">
      <li class="item" v-for="(item, index) of data" :key="index">
        <number-scroll
          class="value"
          :number="item.value"
          :color="'#cdf3ff'"
          :fontSize="22"
        ></number-scroll>
        <p class="name">{{ item.name }}</p>
      </li>
    </ul>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch, computed } from 'vue'
import { useStore } from 'vuex'
import comBox from '@/components/comBox/comBox.vue'
import numberScroll from '@/components/numberScroll/numberScroll.vue'
import httpRequest from '@/service'
export default defineComponent({
  name: 'M1LeftLower',
  props: {
    adcode: {
      type: String,
      default: '650000'
    }
  },
  components: {
    comBox,
    numberScroll
  },
  setup(props) {
    const state: any = reactive({
      title: '',
      data: [],
      getData: (val: string) => {
        httpRequest
          .get({ url: 'M1sjbsqk', params: { adcode: val } })
          .then((res) => {
            if (res.code == 200) {
              state.title = res.title
              state.data = res.data
            }
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })
    state.getData(props.adcode)
    const { title, data } = toRefs(state)
    const refreshData = () => {
      state.getData(props.adcode)
    }
    watch(
      () => props.adcode,
      (val) => {
        state.getData(val)
      }
    )
    return {
      title,
      data,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
ul.list {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  li.item {
    width: 140px;
    height: 140px;
    text-align: center;
    .value {
      margin-top: 48px;
    }
    .name {
      font-size: 16px;
      font-family: 'AliHYAiHei';
      margin-top: 6px;
    }
    &:first-child {
      background: url('../img/sjbs-icon1.png') no-repeat center center;
      .name {
        color: #72e3ff;
      }
    }
    &:last-child {
      background: url('../img/sjbs-icon2.png') no-repeat center center;
      .name {
        color: #dfef43;
      }
    }
  }
}
</style>
